<template>
  <div class="history">
    <!-- 左侧站点列表 -->
    <div class="site-list-panel">
      <div class="panel-header">
        <h3>监控站点</h3>
        <el-button type="primary" size="small" @click="refreshSites">
          <el-icon><Refresh /></el-icon>
          刷新
        </el-button>
      </div>
      
      <div class="site-tree">
        <el-tree
          :data="treeData"
          :props="treeProps"
          :default-expand-all="true"
          node-key="id"
          :highlight-current="true"
          @node-click="handleNodeClick"
          class="monitor-tree"
        >
          <template #default="{ node, data }">
            <div class="tree-node">
              <div class="node-content">
                <el-icon v-if="data.type === 'site'" class="node-icon">
                  <Location />
                </el-icon>
                <el-icon v-else class="node-icon">
                  <VideoCamera />
                </el-icon>
                <span class="node-label">{{ data.name }}</span>
              </div>
            </div>
          </template>
        </el-tree>
      </div>
    </div>

    <!-- 右侧视频列表 -->
    <div class="video-list-panel">
      <div class="panel-header">
        <h3>{{ selectedCamera?.name || '请选择监控摄像头' }}</h3>
        <div class="search-bar" v-if="selectedCamera">
          <el-date-picker
            v-model="searchDate"
            type="date"
            placeholder="选择日期"
            :clearable="false"
            @change="handleDateChange"
          />
        </div>
      </div>

      <div class="video-list" v-if="selectedCamera">
        <el-empty v-if="!videoGroups.length" description="暂无录像" />
        <template v-else>
          <div v-for="group in videoGroups" :key="group.time" class="video-group">
            <div class="group-header">
              <el-icon><Calendar /></el-icon>
              <span>{{ group.time }}</span>
              <el-tag size="small" type="info">{{ group.videos.length }}个片段</el-tag>
            </div>
            <div class="group-content">
                             <div v-for="video in group.videos" :key="video.id" class="video-item" @click="playVideo(video)">
                 <div class="video-thumbnail">
                   <div class="video-placeholder">
                     <el-icon size="32" color="#909399"><VideoCamera /></el-icon>
                     <p class="camera-name">{{ selectedCamera.name }}</p>
                     <p class="record-time">{{ video.startTime }}</p>
                     <span class="video-duration">{{ video.duration }}</span>
                   </div>
                 </div>
                 <div class="video-info">
                   <div class="video-time">{{ video.startTime }} - {{ video.endTime }}</div>
                   <div class="video-desc">{{ video.description }}</div>
                 </div>
               </div>
            </div>
          </div>
        </template>
      </div>
      <div class="empty-state" v-else>
        <el-icon size="64" color="#c0c4cc"><VideoCamera /></el-icon>
        <p>请从左侧选择监控摄像头</p>
      </div>
    </div>

    <!-- 视频播放弹窗 -->
    <el-dialog
      v-model="playerVisible"
      :title="currentVideo?.description || '视频回放'"
      width="80%"
      :destroy-on-close="true"
      class="player-dialog"
    >
      <div class="video-player">
        <video
          v-if="currentVideo"
          :src="currentVideo.url"
          controls
          class="player-video"
        ></video>
        <div class="player-info">
          <div class="info-item">
            <label>开始时间：</label>
            <span>{{ currentVideo?.startTime }}</span>
          </div>
          <div class="info-item">
            <label>结束时间：</label>
            <span>{{ currentVideo?.endTime }}</span>
          </div>
          <div class="info-item">
            <label>时长：</label>
            <span>{{ currentVideo?.duration }}</span>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { Location, VideoCamera, Refresh, Calendar } from '@element-plus/icons-vue'

// 站点数据
const sites = ref([
  {
    id: 1,
    name: '主井口监控点',
    location: '主井口区域',
    status: 'online',
    cameraCount: 4,
    cameras: [
      { id: 1, name: '主井口-01', status: 'online' },
      { id: 2, name: '主井口-02', status: 'online' },
      { id: 3, name: '主井口-03', status: 'online' },
      { id: 4, name: '主井口-04', status: 'offline' }
    ]
  },
  {
    id: 2,
    name: '副井口监控点',
    location: '副井口区域',
    status: 'online',
    cameraCount: 3,
    cameras: [
      { id: 5, name: '副井口-01', status: 'online' },
      { id: 6, name: '副井口-02', status: 'online' },
      { id: 7, name: '副井口-03', status: 'online' }
    ]
  },
  {
    id: 3,
    name: '井下作业区',
    location: '井下-500m',
    status: 'offline',
    cameraCount: 2,
    cameras: [
      { id: 8, name: '井下-01', status: 'offline' },
      { id: 9, name: '井下-02', status: 'offline' }
    ]
  },
  {
    id: 4,
    name: '地面运输区',
    location: '地面运输线',
    status: 'online',
    cameraCount: 5,
    cameras: [
      { id: 10, name: '运输-01', status: 'online' },
      { id: 11, name: '运输-02', status: 'online' },
      { id: 12, name: '运输-03', status: 'online' },
      { id: 13, name: '运输-04', status: 'online' },
      { id: 14, name: '运输-05', status: 'online' }
    ]
  }
])

// 树形数据配置
const treeProps = {
  children: 'children',
  label: 'name'
}

// 计算树形数据
const treeData = computed(() => {
  return sites.value.map(site => ({
    id: `site-${site.id}`,
    name: site.name,
    type: 'site',
    status: site.status,
    children: site.cameras.map(camera => ({
      id: `camera-${camera.id}`,
      name: camera.name,
      type: 'camera',
      status: camera.status,
      cameraId: camera.id,
      siteId: site.id
    }))
  }))
})

// 选中的站点和摄像头
const selectedSite = ref(null)
const selectedCamera = ref(null)

// 搜索日期
const searchDate = ref(new Date())

// 视频播放器控制
const playerVisible = ref(false)
const currentVideo = ref(null)

// 模拟视频数据
const videoGroups = ref([])

// 处理节点点击
const handleNodeClick = (data) => {
  if (data.type === 'site') {
    selectedSite.value = sites.value.find(site => `site-${site.id}` === data.id)
    selectedCamera.value = null
    videoGroups.value = []
  } else if (data.type === 'camera') {
    const site = sites.value.find(site => site.id === data.siteId)
    const camera = site.cameras.find(camera => camera.id === data.cameraId)
    selectedSite.value = site
    selectedCamera.value = camera
    fetchVideoData()
  }
}

// 刷新站点列表
const refreshSites = () => {
  // TODO: 实现刷新逻辑
  console.log('刷新站点列表')
}

// 处理日期变化
const handleDateChange = () => {
  fetchVideoData()
}

// 获取视频数据
const fetchVideoData = () => {
  // 模拟API调用
  const date = searchDate.value
  const groups = []
  
  // 生成当天的时间段
  const timeSlots = ['上午', '下午', '晚上']
  timeSlots.forEach((slot, index) => {
         const videos = Array.from({ length: 3 }, (_, i) => ({
       id: `${date.getTime()}-${index}-${i}`,
       url: 'https://www.w3schools.com/html/mov_bbb.mp4',
       startTime: `${8 + index * 4}:${i * 20}:00`,
       endTime: `${8 + index * 4}:${(i + 1) * 20}:00`,
       duration: '20:00',
       description: `${selectedCamera.value.name} ${timeSlots[index]}录像片段 ${i + 1}`
     }))

    if (videos.length) {
      groups.push({
        time: `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()} ${timeSlots[index]}`,
        videos
      })
    }
  })

  videoGroups.value = groups
}

// 播放视频
const playVideo = (video) => {
  currentVideo.value = video
  playerVisible.value = true
}
</script>

<style scoped>
.history {
  display: flex;
  height: calc(100vh - 120px);
  gap: 16px;
  background-color: #f5f7fa;
  padding: 16px;
}

.site-list-panel,
.video-list-panel {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.site-list-panel {
  width: 300px;
  flex-shrink: 0;
}

.video-list-panel {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.panel-header {
  padding: 16px 20px;
  border-bottom: 1px solid #e4e7ed;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.panel-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

.search-bar {
  display: flex;
  gap: 12px;
}

/* 树形结构样式 */
.site-tree {
  padding: 16px;
  height: calc(100% - 60px);
  overflow-y: auto;
}

.monitor-tree {
  background: transparent;
}

.tree-node {
  width: 100%;
}

.node-content {
  display: flex;
  align-items: center;
  gap: 8px;
}

.node-icon {
  font-size: 16px;
  color: #409eff;
}

.node-label {
  flex: 1;
  font-size: 14px;
}

/* 视频列表样式 */
.video-list {
  flex: 1;
  padding: 16px;
  overflow-y: auto;
}

.video-group {
  margin-bottom: 24px;
}

.group-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #e4e7ed;
  color: #606266;
}

.group-content {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

.video-item {
  background: white;
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s;
  border: 1px solid #e4e7ed;
}

.video-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.video-thumbnail {
  position: relative;
  height: 160px;
  background: #000;
}

.video-placeholder {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #909399;
  position: relative;
}

.video-placeholder .camera-name {
  margin: 8px 0 4px;
  font-size: 14px;
  color: #e6e6e6;
}

.video-placeholder .record-time {
  font-size: 12px;
  color: #909399;
}

.video-duration {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: rgba(0, 0, 0, 0.6);
  color: white;
  padding: 2px 6px;
  border-radius: 2px;
  font-size: 12px;
}

.video-info {
  padding: 12px;
}

.video-time {
  font-size: 14px;
  color: #303133;
  margin-bottom: 4px;
}

.video-desc {
  font-size: 12px;
  color: #909399;
}

.empty-state {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #909399;
}

.empty-state p {
  margin-top: 16px;
  font-size: 16px;
}

/* 视频播放器样式 */
.player-dialog :deep(.el-dialog__body) {
  padding: 0;
}

.video-player {
  background: #000;
}

.player-video {
  width: 100%;
  aspect-ratio: 16/9;
}

.player-info {
  padding: 16px;
  background: white;
}

.info-item {
  margin-bottom: 8px;
  display: flex;
  align-items: center;
}

.info-item label {
  width: 80px;
  color: #606266;
}

.info-item span {
  color: #303133;
}
</style> 